<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
         table {
              border: 1px solid #e9e9e9;
              border-collapse: collapse;
              border-spacing: 0;
              align-items: center  ;
              width: 800px;
              
            }
            table {
                margin-left: 300px;
                margin-top: 100px;
                
            }
             h2 {
                margin-left: 300px;
             }
            th,
            td {
              padding: 8px 16px;
              border: 1px solid #e9e9e9;
              text-align: left;
            }
        
            th {
              background-color: #f7f7f7;
              color: #5c6b77;
              font-weight: 600;
            }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="cart">
             <table border="1px" width="50%" height="300px" align="center" cellspacing="0">
                <tr>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in items">
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        
                        <button href="#" @click.prevent="subtractCount(index)">-</button>
                        <span v-model="count">{{item.count}}</span>
                        <button href="#" @click.prevent="addCount(index)" >+</button>
                    </td>
                    <td><button href="#" @click.prevent="deleteItem(index)" >移除</button></td>
                </tr>


            </table>
            <h1 >总价格：{{totalPrice}}</h1>
    </div>

    
</body>

<script >
      var vue = new Vue({
        el:"#cart",
        data:{
            items : [{
                        name:"华为p40",
                        date:"2020/4/10",
                        price:50.00,
                        count:2,
                    },{
                        name:"Lenovo",
                        date:"2020/5/10",
                        price:100.00,
                        count:3,
                    },{
                        name:"TCL",
                        date:"2020/6/10",
                        price:80.00,
                        count:4
                    }],
                totalPrice:0
        },
        methods:{

            //移除当前商品
            deleteItem(index){

               this.items.splice(index,1);//移除当前商品

               //计算操作后商品总价格
               var calItems = this.items;
                var price = 0;

                calItems.forEach(element => {
                    price+=element.price*element.count;
                });

                this.totalPrice=price;

            },
            subtractCount(index){

                var count=this.items[index].count;
                count -=1 //当前个数减少1
                if(count >= 1){//购买数量最低为0
                    this.items[index].count = count;
                }else{
                    this.items[index].count = 1;
                }

                //计算操作后商品总价格
                var calItems = this.items;
                var price = 0;

                calItems.forEach(element => {
                    price+=element.price*element.count;
                });

                this.totalPrice=price;
            },
            //数量新增
            addCount(index){

               this.items[index].count +=1;//当前个数新增1
               var calItems = this.items;

                //计算操作后商品总价格
                var price = 0;
                calItems.forEach(element => {
                    price+=element.price*element.count;
                });

                this.totalPrice=price;
            }
        },

        //初始化计算总金额
         mounted(){
             var calItems = this.items;
             var price = 0;
                calItems.forEach(element => {
                    price+=element.price*element.count;
                });
                this.totalPrice=price;
         }

      });

</script>
  
</html>